<template>
  <div>
    <el-dialog
      title="续租合同"
      :visible="visible"
      width="width"
      @close="$emit('update:visible',false)"
    >
      <!-- 生成表单 -->
      <myForm ref="form" :option="option" :form="form">
        <template #upload>
          <upload
            ref="uploadRef"
            :file-array="['doc', 'docx', 'pdf']"
            :file-size="5"
            type="contract"
            tip-content="支持扩展名：.doc .docx .pdf, 文件大小不得超过5M"
            @onSuccess="handlerSuccess"
          />
        </template>
      </myForm>
      <div slot="footer">
        <el-button @click="$emit('update:visible',false)">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MyForm from '@/components/my-form/TForm.vue'
import { option } from './const.js'
import { addRentAPI } from '@/api/enterprise'
import Upload from '@/views/Park/Enterprise/components/upload.vue'

export default {
  components: {
    MyForm, Upload
  },
  props: {
    visible: Boolean,
    form: Object

  },
  data() {
    return {
      option
    }
  },
  watch: {
    visible(val) {
      if (val === false) {
        this.$refs.uploadRef.clear()
        this.$refs.form.resetFields()
      }
    }
  },
  created() {
    this.$set(this.form, 'time', this.form.time)
  },
  methods: {
    handlerSuccess(res) {
      this.$set(this.form, 'rent', res)
    },
    async onSubmit() {
      await this.$refs.form.validate()
      // 整理数据
      const data = {
        buildingId: this.form.buildingId,
        startTime: this.form.time[0],
        endTime: this.form.time[1],
        contractUrl: this.form.rent.url,
        contractId: this.form.rent.id,
        type: 1,
        enterpriseId: this.form.enterpriseId
      }
      await addRentAPI(data)
      this.$message.success('操作成功!')
      this.$emit('update:visible', false)
      // 刷新列表
      this.$emit('success')
    }
  }
}
</script>

<style>
.el-form{
  height:300px;
}
</style>
